<template>
  <div class="main-windowContainer" :id="id">
    <div class="panelTitle"  @mousedown="handleMouseDown">
      <div class="titleContent">{{title}}</div>
      <div class="titleClose" @click="$emit('close')">X</div>
    </div>
    <div class="panelContent">
      <slot></slot>
    </div>
    <div class="panelFooter"></div>
  </div>
</template>

<script>
export default {
  name: "windowContainer",
  components: {},
  props: ['title'],
  data() {
    return {
      id: 'test' + Math.random()
    };
  },
  mounted() {

  },
  methods: {
    handleMouseDown(e) {
      let odiv = document.getElementById(this.id);        //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {       //鼠标按下并移动的事件
                                            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
        odiv.style.bottom ='auto';
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-windowContainer {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  height: auto;
  width: 850px;
  max-height: 700px;
  z-index: 10;
  /*background-color: #00000080;*/
  border-radius: 5px;
  overflow: hidden;
}

.panelTitle {
  height: 40px;
  line-height: 40px;
  color: white;
  font-size: 14px;
  padding-left: 15px;
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  cursor: move;
  user-select: none;
  background-image: url("../assets/img/chuangti/title.png");
  background-size: 100% 100%;
}
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url("../assets/font/YouSheBiaoTiHei-2.ttf");
}
.titleContent{
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
  font-size: 20px;
}
.titleClose{
  cursor: pointer;
  margin-right: 20px;
}
.panelContent{
  max-height: 440px;
  overflow-y: scroll;
  background-image: url("../assets/img/chuangti/contentTop.png");
  background-size: 100% 100%;
  padding: 5px;
  padding-bottom: 15px;
  height: 440px;
  position: relative;
  overflow: hidden;
}
.panelFooter{
  height: 30px;
  background-image: url("../assets/img/chuangti/contentBottom.png");
  background-size: 100% 100%;
  position: relative;
  top: -0.5px;
}
</style>
